<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CdromDevice from './devices/CdromDevice.vue';
import DiskDevice from './devices/DiskDevice.vue';
import {
    BIconPc,BIconPciCard, BIconCpu, BIconPlusSquare,BIconVinyl, 
    BIconDeviceHdd, BIconMemory ,BIconGear, BIconArrowUpSquare
} from "bootstrap-icons-vue";

defineProps<{
  xml?: string
}>()

onMounted(()=>{
    /*解析xml并赋值*/
    const defaultTemplate1 = {
    name: "测试主机",
    boot: [],
    arch: "x86_64",
    machine: 'pc-q35-6.2',
    memory: 2048,
    memoryUnit: "MB",
    cpu: 1,
    cpuCore: 8,
    cpuThread: 1,
    device: [{
        type: "cdrom",
        xml: `<disk type="file" device="cdrom">
  <driver name="qemu" type="raw"/>
  <source file="/home/gtl/CentOS-7-x86_64-Minimal-2009.iso"/>
  <target dev="sda" bus="sata"/>
  <readonly/>
  <boot order="1"/>
  <address type="drive" controller="0" bus="0" target="0" unit="0"/>
</disk>`,
        default: true
    }]
}
host.value = defaultTemplate1
})

const archs = ref<Array<string>>(["x86_64"])
const machines = ref<Array<string>>(["pc-q35-6.2"])
const defaultTemplate = {
    name: " ",
    boot: [],
    arch: "x86_64",
    machine: 'pc-q35-6.2',
    memory: 2048,
    memoryUnit: "MB",
    cpu: 1,
    cpuCore: 4,
    cpuThread: 1,
    device: [{
        type: "cdrom",
        xml: `<disk type="file" device="cdrom">
  <driver name="qemu" type="raw"/>
  <source file="/home/gtl/CentOS-7-x86_64-Minimal-2009.iso"/>
  <target dev="sda" bus="sata"/>
  <readonly/>
  <boot order="1"/>
  <address type="drive" controller="0" bus="0" target="0" unit="0"/>
</disk>`,
        default: true
    }]
}
/*虚拟机数据类型*/
const host = ref<VirtHost>(defaultTemplate)

/*当前的配置步骤*/
const setUp = ref(1)

/*当前选中的设备类型*/
const typeFilter = ref<string | null>(null)

/*选中下拉框时加载，实现懒加载机制*/
const optionItem = ref<Device|null>(null)

/*设备类型*/
const deviceMap = {
    "cdrom": "光驱",
    "disk": "磁盘",
    "interface": "网络",
    "controller": "控制",
    "input": "输入",
    "video": "视频",
    "graphics": "桌面"

}
/*根据类型选中名称*/
const getTypeMap = (code: any) =>{
    return (<any>deviceMap)[code]
}

/*设备数据结构*/
interface Device {
    type?: string,
    xml?: string,
    default?: boolean,
    display?: boolean
}

/*虚拟机设备数据结构*/
interface VirtHost {
    name: string,
    boot?: Array<Device>,
    arch: string,
    machine: string,
    memory: number,
    memoryUnit: string,
    cpu: number,
    cpuCore: number,
    cpuThread: number,
    device: Array<Device>

}

/**删除设备*/
const deleteDevice = (item: any) => {
    if(host.value != null)
    host.value.device = host.value.device.filter(i => i != item)
}
/*添加设备*/
const addDevice = () => {
    if(host.value != null)
    if (typeFilter.value == null) {
        host.value.device.unshift({})
    } else {
        host.value.device.unshift({ type: typeFilter.value })
    }
}
const getFile = (xml: any)=>{
    let doc:any = new DOMParser()
    let formXml:any = doc.parseFromString(xml, "text/xml")
    try {
        let file = formXml.getElementsByTagName("source")[0]?.getAttribute("file")
        let files = file.split("/")
        return files.pop()
    } catch (error) {
         return ""
    }

}
</script>

<template>
    <div class="create-host-component">
        <div>
            <el-steps class="setup-bar" :active="setUp" align-center>
                <el-step title="基础配置" :icon="BIconPc" @click="setUp = 1" />
                <el-step title="设备配置" :icon="BIconPciCard" @click="setUp = 2" />
                <el-step title="资源配置" :icon="BIconCpu" @click="setUp = 3" />
            </el-steps>
            <!-- 配置 -->
            <div  class="config-style">
                <template v-if="setUp == 1">
                    <div>
                        <el-form :inline="true" :model="host" class="demo-form-inline" >
                            <el-col :span="11">
                                <el-form-item label="主机名">
                                    <el-input v-model="host!.name" />
                                </el-form-item>
                                <!-- 处理器架构 -->
                                <el-form-item label="处理器架构" style="width: 186px">
                                    <el-select v-model="host!.arch">
                                        <template v-for="arch in archs">
                                            <el-option :label="arch" :value="arch" />
                                        </template>
                                    </el-select>
                                </el-form-item>
                                <!-- 硬件架构 -->
                                <el-form-item label="硬件架构" style="width: 186px">
                                    <el-select v-model="host!.machine">
                                        <template v-for="machine in machines">
                                            <el-option :label="machine" :value="machine" />
                                        </template>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </div>
                </template>

                <template v-if="setUp == 2">
                    <div class="device-type-style">
                        <ui class="device-type-ui">
                            <li  class="device-type-li">
                                <BIconVinyl class="device-type-icon"> </BIconVinyl>
                                光驱
                              <!-- <BIconGearFill  />
                                <BIconSliders />
                                <BIconDeviceHdd  />
                                <BIconGeoFill />
                                <BIconUsbSymbol />
                                <BIconDisplayFill />
                                <BIconEthernet />
                                <BIconUnion />  -->
                            </li>   
                            <li class="device-type-li">
                                <BIconDeviceHdd class="device-type-icon" ></BIconDeviceHdd> 磁盘
                            </li> 
                        </ui>
                    </div>

                    <template v-for="xml in host.device">
                        <ui class="device-list-ui">
                            <li style="">
                                <CdromDevice v-model="xml.xml" />
                            </li>
                            <li>
                                <DiskDevice v-model="xml.xml"></DiskDevice>
                            </li>
                        </ui>
                    </template>

                    <!-- 添加按钮 -->
                    <div style="height: 100%; 
                    width: 30px; 
                    height: 390px; 
                    right: 0px;
                    top: 130px; 
                    font-size: 22px;">
                        <BIconPlusSquare style="right: 15px; margin-left: 8px;"/>
                    </div>

                </template>

                <template v-if="setUp == 3">
                    <el-form :inline="true" :model="host" class="demo-form-inline"
                        style="display: flex; justify-content: center; align-items: center;position: absolute; top: 150px;">
                        <el-col :span="11">
                            <el-form-item  style="flex-direction: column;align-items: flex-start; width: 320px">
                                <BIconMemory style="font-size: 26px; " />
                                <span style="font-size: 12px;margin-right: 15px; margin-bottom: 18px">内存</span>
                                <el-input v-model="host!.memory" style="width: 180px"/>
                                <el-select  v-model="host!.memoryUnit"  style="width: 70px;">
                                    <el-option  v-for="item in ['KB','MB', 'GB']" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>

                            <!-- 处理器架构 -->
                            <el-form-item  style="width: 320px">
                                <BIconCpu style="font-size: 26px;"></BIconCpu>
                                <span style="font-size: 12px;margin-right: 15px; margin-bottom: 18px">cpu</span>
                                <label>颗数:</label>
                                <el-input v-model="host!.cpu" class="input-cpu-number"/>
                                <label>内核:</label>
                                <el-input v-model="host!.cpuCore" class="input-cpu-number"/>
                                <label>线程:</label>
                                <el-input v-model="host!.cpuThread" class="input-cpu-number"/>
                            </el-form-item>

                            <el-form-item class="boot-form-item">
                                <span style="font-size: 12px ;margin-left: calc(50% - 26px);">
                                    <BIconGear style="font-size: 26px;" /><span style=" position: absolute;top: -12px;">boot</span>
                                </span>

                                <br />
                                <ui>
                                    <template  v-for="item in host.device" >
                                        <li class="boot-list-li" 
                                        :v-show="item.type == 'cdrom' || item.type == 'disk' " > 
                                        <span>
                                           <el-checkbox style="margin-left: 6px;position: absolute;" />
                                           <span style="margin-left: 26px;">[{{getTypeMap(item.type)}} ]   {{getFile(item.xml)}} </span>  
                                            <BIconArrowUpSquare style="position: absolute;right:5px;font-size: 16px;margin-top: 8px"/>
                                        </span>
                                        </li>
                                    </template>
                                </ui>
                            </el-form-item>

                        </el-col>
                    </el-form>

                </template>
            </div>

            <el-button v-if="setUp != 1" style="right: 96px" type="primary" plain class="setup-button" @click="setUp -= 1">
                返回
            </el-button>

            <el-button type="primary" :plain="setUp != 3" class="setup-button" @click="() => { if (setUp < 3) setUp += 1 }">
                {{ setUp == 3 ? '完成' : '下一步' }}
            </el-button>
        </div>
    </div>
</template>

<style scoped>
    .device-type-style {
        height: 100%;
        width: 115px;
        height: 390px;
        left: 0px;
        top: 130px;
    }

    .device-type-ui {
        font-size: 16px; text-align: center;
    }

    .device-type-li {
        padding: 8px 0px;box-shadow: var(--el-box-shadow-lighter);
        list-style: none;
        user-select: none;
    }

    .device-type-icon {
        position: relative; top: 2px;
    }
    
    .device-list-ui {
        width: calc( 100% - 65px ); 
        height: 390px;
        background-color: #b2b2b265; 
        list-style: none; 
        margin-left: 8px; 
        overflow-y: auto;
        overflow-x: hidden;
    }

    .config-style {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 396px;
        overflow-y: auto;
    }

    .setup-button {
        position: absolute; bottom:15px; right: 15px
    }

    .setup-bar {
        width: 800px; user-select: none
    }

    .create-host-component {
        display: flex; justify-content: center; align-items: center; margin-top: 15px
    }

    .demo-form-inline {
        display: flex; justify-content: center; align-items: center;
    }

    .input-cpu-number {
        width: 39px; margin-right: 10px; margin-left: 5px
    }

    .boot-form-item {
        width: 520px;
        box-shadow: var(--el-box-shadow);
        padding: 5px 5px;
        max-height: 239px;
        flex-direction:column;
        overflow-y: auto;
        margin: 0px 0px; 
        position: absolute;
        left: calc(50% - 250px);
    }

    .boot-list-li {
        list-style-type: none;
    display: flex;width: 420px;
    box-shadow: var(--el-box-shadow-lighter); 
    width: 520px;
    padding: 6px 0px; 
    border-radius: 3px;
    }
</style>